<html>
<body>
<script>
  var keyDicts = [];

  function getActiveModifiers(e) {
    let active_modifiers = [];
    // This list contains all modifiers listed in
    // https://www.w3.org/TR/uievents-key/#keys-modifier (2017). It also
    // includes "OS", which isn't in the spec, but it is listed on the
    // MDN page for getModifierState.
    //
    // Note that several of the listed modifiers aren't yet supported on
    // Fuchsia/Chrome.
    for (modifier of ["Alt", "AltGraph", "CapsLock", "Control", "Fn",
                      "FnLock", "Hyper", "Meta", "NumLock", "OS",
                      "ScrollLock", "Shift", "Super", "Symbol",
                      "SymbolLock"]) {
      if (e.getModifierState(modifier)) {
        active_modifiers.push(modifier);
      }
    }
    return active_modifiers;
  }

  document.addEventListener("keypress", (e) => {
    keyDicts.push( { "key" : e.key, "code" : e.code, "type" : e.type, "repeat": e.repeat, "modifiers": getActiveModifiers(e)});
    document.title = keyDicts.length;
  });

  document.addEventListener("keyup", (e) => {
    keyDicts.push({ "key" : e.key, "code" : e.code, "type" : e.type, "repeat": e.repeat, "modifiers": getActiveModifiers(e)});
    document.title = keyDicts.length;
  });

  document.addEventListener("keydown", (e) => {
    keyDicts.push({ "key" : e.key, "code" : e.code, "type" : e.type, "repeat": e.repeat, "modifiers": getActiveModifiers(e)});
    document.title = keyDicts.length;
  });

  window.onload = function() { document.title = "loaded"; }
</script>
</body>
</html>
